<template>
  <div>
    <div class="container">
      <div class="header">
        <van-swipe tag="div" class="headerimg" indicator-color="#fff">
          <van-swipe-item v-for="item in banners" :key="item.id">
            <img :src="item.img" alt="">
          </van-swipe-item>
        </van-swipe>

        <div class="header_inner">
          <router-link tag="div" to="/sear" class="seach">
            <div class="seacher">
              <p>试试</p>
            </div>
          </router-link>
        </div>
      </div>
      <div class="main">
        <div class="main_content">
          <router-link tag="div" to="/location" class="address">
            <span class="iconfont icon-dizhiguanli"></span>
            请设置你的取车位置
            <span class="gt">&gt;</span>
          </router-link>
          <router-link tag="div" to="/data" class="time">
            <span class="iconfont icon-shijian"></span>

            <div class="pick">
              <span>取车</span>
              <p>09月24日 14:15</p>
            </div>


            <div class="return">
              <span>还车</span>
              <p>09月24日 14:15</p>
            </div>


          </router-link>
          <div class="spread">
            <span class="iconfont icon-gou "></span>
            <span>上门取货</span>
            <img class="spread-img" src="https://carphoto.atzuche.com/system/home/v622/homeGetCarTips@3x.png" alt="">

          </div>
          <div class="find">

            <router-link tag="div" to="/search" class="button">马上找车</router-link>

          </div>
          <div class="quantity">
            <p>凹凸入驻269城，共有302,034辆靓车等您挑选</p>
          </div>
        </div>
      </div>
      <div class="welfare">
        <ul class="welfare_content">
          <li>
            <img src="https://carphoto.atzuche.com/v50/console/12/24/16/54/33/1640336155775.jpeg" alt="">
            <p>租车福利</p>
            <span>复工返程租车先领券</span>
          </li>
          <li>
            <img src="https://carphoto.atzuche.com/v50/console/12/12/17/56/33/1576144640278.png" alt="">
            <p>超值月租</p>
            <span>30天起租低至7折</span>
          </li>
          <li>
            <img src="https://carphoto.atzuche.com/v50/console/12/10/16/04/57/1575965107854.png" alt="">
            <p>共享时租</p>
            <span>分钟计费 自助取</span>
          </li>
        </ul>
      </div>
      <!-- <div class="model">
        <div class="model_content">
          <h2>热门车型</h2>
          <div class="title" v-if="lovecar">
            <router-link tag="a" :to="'/pagetwo?id=' + item.carid" href="" v-for="item in lovecar" :key="item.carid">
              {{ item.name }}</router-link>
            <a href="">更多车型</a>
          </div>
        </div>
      </div> -->
      <ModEls></ModEls>

      <div class="introduce">
        <div class="introduces">
          <h2>凹凸自我介绍</h2>
          <p>你也可以和朋友这样介绍我</p>
          <img src="https://carphoto.atzuche.com/system/home/v60/brand_guide_anhei_v2@3x.png" alt="">
        </div>
      </div>
      <div class="com">
        <div class="coms">
          <h3>没有满意的车？</h3>
          <p>下载凹凸租车APP,低价好车随你挑</p>
          <div class="button">下载凹凸租车APP</div>
        </div>
      </div>
      <div class="footer">
        <div class="footers">
          <ul>
            <li>
              <img src="../assets/img/下载.png" alt="">
              <p class="active"><a href="">首页</a></p>
            </li>
            <router-link tag="li" to="/collection">
              <img src="../assets/img/下载 (1).png" alt="">
              <p>收藏</p>
            </router-link>
            <router-link tag="li" to="/itinerary">
              <img src="../assets/img/下载 (2).png" alt="">
              <p>行程</p>
            </router-link>
            <router-link tag="li" to="/mi">
              <img src="../assets/img/下载 (3).png" alt="">
              <p>我的</p>
            </router-link>
          </ul>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
// import "../assets/font/iconfont.js";
// import "../assets/fonts/iconfont.js"
import { getHome } from "../api/home.js"
import ModEls from "@/components/ModEls"
import Swiper from "swiper";
export default {
  data() {
    return {
      indexSwiper: 0,
      banners: null,

      flag:true
    };
  },
  methods: {
    onChange(index) {
      this.indexSwiper = index;
    },
  },
  created() {
    getHome().then(data => {
      console.log(data);
      this.banners = data.banner
    });
   
  },
  updated() {
    new Swiper(".swiper-selectedSong", {
      slidesPerView: "auto",
      spaceBetween: 12,
      observer: true,
      observeParents: true, //自动初始化父节点swiper对象
    });
  },
  components:{
     ModEls
  }
}
</script>

<style lang="scss">
* {
  padding: 0px;
  margin: 0px;
}

ul {
  list-style: none;
}

body,
html {
  width: 100%;
  height: 100%;
}

a {
  text-decoration: none;
}

.container {
  max-width: 750px;
  min-width: 320px;
  margin: 0 auto;

  .footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    border-top: 1px solid #c9c9d0;
  }
}

.header {
  width: 100%;
  height: 270px;
  position: relative;

  .headerimg {
    width: 100%;
    height: 270px;

    img {
      width: 100%;
      height: 100%;
    }

    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 10px;
      text-align: center;
    }

    .van-swipe__indicators {
      bottom: 80px;
      transform: translateX(50%);
    }

  }

  .header_inner {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: flex-end;
    align-content: center;
    position: absolute;
    top: 0;

    .text {
      width: 85px;
      height: 27px;
      text-align: center;
      color: #fff;
      background: url('') 100% no-repeat;
      background-size: 15px auto;
      font-size: 18px;
      margin-top: 29px;
    }

    .seach {
      width: 102px;
      height: 40px;
      margin-top: 20px;
      margin-right: 20px;

      .seacher {
        width: 96px;
        height: 100%;
        border-radius: 20px;
        background-color: rgba(0, 0, 0, 0.66);

        p {
          line-height: 40px;
          color: #fff;
          font-size: 14px;

          &::before {
            content: "";
            display: block;
            width: 20px;
            height: 20px;
            background: url('') 50% no-repeat;
            background-size: contain;
            float: left;
            margin-left: 15px;
            margin-top: 10px;
            margin-right: 10px;
          }
        }
      }
    }
  }




}

.main {
  width: 100%;
  height: 220px;
  margin: 0 auto;
  padding-top: 10px;

  .main_content {
    width: 95%;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 0 10px #eee;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    position: absolute;
    bottom: 170px;
    left: 10px;

    .address {
      width: 100%;
      height: 58px;
      font-size: 15px;
      border-bottom: 1px solid #c9c9d0;

      .iconfont {
        font-size: 24px;
        color: #c9c9d0;
        margin-left: 20px;
        line-height: 58px;
      }

      .gt {
        float: right;
        font-size: 20px;
        color: #c9c9d0;
        font-family: "仿宋";
        line-height: 65px;
        margin-right: 25px;
      }
    }

    .time {
      width: 100%;
      height: 70px;
      display: flex;
      padding: 10px 0;

      .iconfont {
        font-size: 24px;
        line-height: 70px;
        color: #c9c9d0;
        margin-left: 20px;
      }

      .pick {
        display: flex;
        flex-direction: column;
        padding-right: 24px;
        flex: 1 1;
        border-right: 1px solid #f5f5f5;

        span {
          font-size: 13px;
          color: #c9c9d0;
          line-height: 38px;
          margin-left: 16px;
        }

        p {
          color: #565670;
          margin-left: 16px;
        }
      }

      .return {
        height: 100%;
        display: flex;
        flex-direction: column;
        padding-right: 24px;
        flex: 1 1;

        span {
          font-size: 13px;
          color: #c9c9d0;
          line-height: 38px;
          margin-left: 16px;
        }

        p {
          color: #565670;
          margin-left: 16px;
        }
      }
    }

    .spread {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      position: relative;
      .con{
        color: #00cf97;
      }

      .iconfont {
        color: #c9c9d0;
        font-size: 24px;
        line-height: 50px;
        margin-left: 20px;
      }

      span {
        font-size: 14px;
        margin-left: 7px;
      }

      .spread-img {
        width: 98px;
        height: 20px;
        margin-left: 10px;
      }

      a {
        position: absolute;
        right: 25px;
        color: green;
        font-size: 14px;
      }
    }

    .find {
      width: 100%;
      height: 40px;

      .button {
        margin: 0 auto;
        width: 90%;
        height: 100%;
        border-radius: 25px;
        background-color: #00cf97;
        color: #fff;
        text-align: center;
        line-height: 40px;
      }
    }

    .quantity {
      width: 100%;
      height: 18px;
      text-align: center;
      line-height: 18px;
      font-size: 12px;
      padding: 20px 0;
      color: #b6b6c2;
    }
  }
}

.welfare {
  margin-top: 20px;
  width: 100%;

  .welfare_content {
    width: 90%;
    height: 237px;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;

    li {
      width: 105px;
      height: 187px;
      text-align: center;

      img {
        width: 100%;
        height: 120px;
        border-radius: 10px;
      }

      p {
        font-size: 15px;
      }

      span {
        color: #8a8a9c;
        font-size: 12px;
      }
    }
  }
}

.model {
  width: 100%;

  .model_content {
    width: 90%;
    height: 250px;
    margin: 0 auto;

    .title {
      width: 100%;
      height: 218px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      a {
        height: 40px;
        background-color: #f5f5f7;
        border-radius: 20px;
        margin-right: 10px;
        text-align: center;
        line-height: 40px;
        font-size: 12px;
        padding: 0 18px;
        margin-top: 12px;
      }
    }
  }
}

.rentent {
  margin-top: 48px;
  width: 100%;

  .rentent_content {
    width: 90%;
    height: 252px;
    margin: 0 auto;

    ul {
      width: 100%;
      height: 150px;
      display: flex;
      flex-wrap: wrap;
      margin-top: 15px;

      li {
        width: 76px;
        height: 40px;
        background-color: #f5f5f7;
        border-radius: 20px;
        text-align: center;
        line-height: 40px;
        font-size: 12px;
        margin-right: 8px;
      }
    }

    .news {
      width: 100%;
      height: 35px;
      display: flex;
      line-height: 35px;
      background-color: #f2fdfa;
      border-radius: 10px;
      margin-top: 10px;

      span {
        font-size: 13px;
        color: #3c3c5a;
        font-weight: 700;

        &::before {
          display: inline-block;
          width: 13px;
          height: 13px;
          margin-left: 14px;
          margin-right: 5px;
          background-image: url();
          background-repeat: no-repeat;
          background-size: 100% 100%;
          content: "";
        }
      }

      a {
        font-size: 12px;
        margin-left: 10px;
      }
    }
  }
}

.introduce {
  width: 100%;
  margin-top: 50px;

  .introduces {
    width: 90%;
    height: 190px;
    margin: 0 auto;

    p {
      font-size: 13px;
      color: #d1d1d8;
      margin-top: 8px;
    }

    img {
      width: 295px;
      height: 113px;
      margin-top: 25px;
    }
  }
}

.com {
  width: 100%;
  margin-top: 50px;
  margin-bottom: 50px;
  padding-bottom: 150px;

  .coms {
    width: 90%;
    height: 128px;
    margin: 0 auto;
    text-align: center;

    p {
      margin-top: 15px;
    }

    .button {
      width: 90%;
      margin: 0 auto;
      height: 40px;
      background-color: #00cf97;
      border-radius: 20px;
      text-align: center;
      line-height: 40px;
      color: #fff;
      margin-top: 20px;
    }
  }
}

.footer {
  .footers {
    width: 90%;
    margin: 0 auto;
  }

  ul {
    height: 65px;
    display: flex;
    justify-content: center;

    li {
      width: 94px;
      height: 100%;

      img {
        width: 35px;
        height: 35px;
        margin: 3px 30px;
      }

      p {
        text-align: center;
        font-size: 13px;
        line-height: 8px;
      }

      .active {
        a {
          color: #00cf97;
        }
      }
    }
  }
}
</style>
